<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
 <%@ include file="/common/commonsetlanguage.jsp" %>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 Workshop - Tools</title>
  <link rel="stylesheet" href="js/jquery.mobile-1.0rc2.min.css" />
  <link rel="stylesheet" href="css/common.css" />
 
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/common/ui.js"></script>
  <script type="text/javascript" src="js/clock/tools_clock.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head>
<script>
addMetaFile("clockcss","tools");

</script>
<fmt:bundle basename="app">
<body>
	<audio id="button1" src="audio/Alarm.mp3" loop="true"></audio>
	
	<div id="clock_outbox">
	<%@ include file="/common/commontools.html" %>
     <div id="clock_container">
    <div data-role="page" id="clock_area">
      <div data-role="content" id="content1">
        <ul id="clock_box">
          <!--clock_toggleButton start-->
          <li id="clock_toggleButton">
            <ul id="clock_button">
              <li><div class="stopwatch_button" id="sw_bu"></div></li>
              <li><div class="countdown_button" id="cd_bu"></div></li>              
            </ul>
          </li>
          <!--clock_toggleButton end-->
          
          <!--stopwatch_content start-->
          <li id="clock_content">
            <!--div1 start-->
            <div id="div1" style="display:block">
              <!--show_timer start-->
              <ul id="show_timer">
                <li class="timer1"><input type="text" value="00" id="larmTime1" disabled/></li>
                <li class="timer2">:</li>
                <li class="timer1"><input type="text" value="00" id="larmTime2" disabled/></li>
                <li class="timer2">:</li>
                <li class="timer1"><input type="text" value="00" id="larmTime3" disabled/></li>
				<li class="timer3"><span id="larmTime4">0</span></li>
              </ul>
              <!--show_timer end-->
              <!--timer_button start-->
              <div id="timer_button">
                <a id="start" style="color:white; font-weight:normal" href="#" class="button_red button_big"/><fmt:message key="start"/></a>
                <a id="stop" style="color:white; font-weight:normal" href="#" class="button_yellow button_big"/><fmt:message key="stop"/></a>
                <a id="record" style="color:white; font-weight:normal" href="#"  class="button_blue button_big"/><fmt:message key="record"/></a>
                <a id="reset" style="color:white; font-weight:normal" href="#" class="button_green button_big"/><fmt:message key="reset"/></a>
              </div>
              <!--timer_button end-->
              <div id="raking">
                <h1 id="raking_title"><fmt:message key="raking"/><span id="time"><fmt:message key="time"/></span></h1>
              </div>
              <div id="show_lap">
                <table width="100%" cellpadding="0" cellspacing="0" id="clock_table" class="clock_table">
                 
                </table>
              </div>
            </div>
            <!--div1 end-->
            <div id="div2" style="display:none">
              <div id="up_arrow">
                <div class="button1">
                  <div class="arrow1"><img id="hour1"  src="image/tools_clock/timer_choice-number_plus.png"/></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1"><img id="min1" src="image/tools_clock/timer_choice-number_plus.png"/></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1"><img id="sec1" src="image/tools_clock/timer_choice-number_plus.png"/></div>
                </div>
              </div>
              <!--show_timer start-->
              <ul id="show_timer" style="margin-top:10px;">
                <li class="timer1"><input type="text" value="00" id="larmTime5" onblur="isNumber('larmTime5')"/></li>
                <li class="timer2">:</li>
                <li class="timer1"><input type="text" value="00" id="larmTime6" onblur="isNumber('larmTime6')"/></li>
                <li class="timer2">:</li>
                <li class="timer1"><input type="text" value="00" id="larmTime7" onblur="isNumber('larmTime7')"/></li>
                <li class="timer3" id="larmTime8">0</li>
              </ul>
              <!--show_timer end-->
              <div id="down_arrow">
                <div class="button1">
                  <div class="arrow1"><img id="hour2" src="image/tools_clock/timer_choice-number_minus.png"/></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1"><img id="min2" src="image/tools_clock/timer_choice-number_minus.png"/></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1"><img id="sec2" src="image/tools_clock/timer_choice-number_minus.png"/></div>
                </div>
              </div>
              
              <div id="four_button">
                <a href="" id="start_button" class="buton2"></a>
               	<a href=""  id="stop_button" class="buton2" style="display:none"></a>
                <a href=""  id="pause_button" class="buton2"></a>
                <a href=""  id="add_button" class="buton2"></a>
                
              </div>
              
              <div id="project">
                <h1 id="raking_title"><fmt:message key="project"/><span id="time_set"><fmt:message key="timeset"/></span></h1>
              </div>
              
               <div id="show_lap">
                <table width="100%" cellpadding="0" cellspacing="0" id="clock_table1" class="clock_table">
                  <tbody id="exampletb">
                    <tr>
                      <td width="40%"><div class="row3" id="time0"><fmt:message key="lunch"/></div></td>
                      <td width="50%"><div class="row4" id="exampletime">00:15:00</div></td>
                      <td width="10%"><img src="image/tools_clock/timer_countdown_delete.png" onclick="deleteplan(this)" id="img0"/>
						
					  </td>
                    </tr>
                  </tbody>
                 
                </table>
              </div>
              <div id="light" class="white_content">
			    <h1 id="title_timesup"><fmt:message key="timeup"/></h1>
				<a href="#" id="ok_button"/><fmt:message key="ok"/></a>
              </div>
              <div id="fade" class="black_overlay"></div>
            </div>
          </li>
          <!--stopwatch_content end-->
        </ul>
      </div>
		</div>
  </div>
   
	
  
  <footer id="footer">
  </footer>
 <script>
 getarraybylocalstrong();
 androidphoneadddiv();
 //window.scrollTo(0,1);
 </script>
  </div>   
</body>
  </fmt:bundle>
</html>